<template>
  <div class="order-center-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>订单中心</h1>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchParams" class="search-form">
        <el-form-item label="需求标题">
          <el-input
            v-model="searchParams.title"
            placeholder="请输入需求标题"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        
        
        
        <el-form-item label="接单用户">
          <el-input
            v-model="searchParams.username"
            placeholder="请输入接单用户名"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch" icon="Search">
            搜索
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 订单列表 -->
    <div class="order-list-section">
      <el-table
        v-loading="loading"
        :data="orderList"
        style="width: 100%"
        :row-class-name="(row) => row.status === 1 ? 'finished-order' : ''"
      >
        <el-table-column prop="demandTitle" label="需求标题" min-width="200">
          <template #default="{ row }">
            <el-tooltip :content="row.demandTitle" placement="top">
              <span class="demand-title">{{ row.demandTitle }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        
        <el-table-column prop="demandDescription" label="需求描述" min-width="300">
          <template #default="{ row }">
            <el-tooltip :content="row.demandDescription" placement="top">
              <span class="description-text">{{ row.demandDescription }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        
        <el-table-column prop="username" label="接单用户名" min-width="120" />
        
        <el-table-column prop="status" label="订单状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="finishTime" label="完成时间" min-width="150">
          <template #default="{ row }">
            {{ row.finishTime || '-' }}
          </template>
        </el-table-column>
        
        <el-table-column prop="updateTime" label="更新时间" min-width="150" />
        
        <el-table-column label="操作" min-width="100" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="row.status === 0"
              type="success"
              size="small"
              @click="handleFinishOrder(row.id)"
              :loading="loading"
            >
              完成
            </el-button>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import { useOrderCenter } from '../hooks/useOrderCenter';

// 使用订单中心的hook
const {
  // 状态
  orderList,
  loading,
  currentPage,
  pageSize,
  total,
  searchParams,
  
  // 方法
  fetchOrderList,
  finishOrder,
  handleSearch,
  handleReset,
  handleCurrentChange,
  handleSizeChange,
  getStatusText,
  getStatusTagType
} = useOrderCenter();

// 处理完成订单操作
const handleFinishOrder = (orderId) => {
  ElMessageBox.confirm('确认完成该订单吗？', '完成确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    finishOrder(orderId);
  }).catch(() => {
    // 取消操作
  });
};

// 组件挂载时获取订单列表
onMounted(() => {
  fetchOrderList();
});
</script>

<style scoped>
.order-center-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.search-section {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.order-list-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demand-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  word-break: break-word;
}

.finished-order {
  background-color: #f0f9eb;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-center-container {
    padding: 10px;
  }
  
  .search-form {
    flex-wrap: wrap;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
  
  .search-form .el-input {
    width: 100% !important;
  }
}
</style>